<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>快递员登录</title>

    <%--jq--%>
    <script src="${pageContext.request.contextPath}/static/jquery/jquery-3.5.1.js" type="text/javascript"></script>
    <%--    laiui 框架--%>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" type="text/javascript"
            charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <%--    bootstrap 框架--%>
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.js" type="text/javascript"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.css" type='text/css'>

    <%--    font-awesome 图标库--%>
    <link href="${pageContext.request.contextPath}/front/css/font-awesome.min.css" type="text/css" rel="stylesheet">
    <%--    百度地图API--%>
    <%--    <script type="text/javascript"--%>
    <%--            src="http://api.map.baidu.com/api?v=3.0&ak=lewICX42RZIlfELxB6dG81zz5W1juYc6"></script>--%>
    <%--    高德地图API--%>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=1.4.15&key=5702b4a78aee7e6d4704e647d45a5e5d&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.DistrictSearch,AMap.Geolocation"></script>
    <%--    项目 css--%>
    <link href="${pageContext.request.contextPath}/front/css/style.css" rel="stylesheet" type="text/css"/>
</head>

<body class="layui-bg-black ">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="${pageContext.request.contextPath}/front/images/banner.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="${pageContext.request.contextPath}/front/images/10170137_889656.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
            <img src="${pageContext.request.contextPath}/front/images/4875-fyrcsrv8762382.jpg" class="d-block w-100" alt="...">
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<div id="" class="container " >
    <form method="post" id="loginForm">
        <div class="form-group">
            <label for="courierName">用户名</label>
            <input type="text" class="form-control col-lg-6 col-md-4"  id="courierName"  name="courierName" aria-describedby="courierNameHelp">
            <small id="courierNameHelp" class="form-text text-muted">用户名一旦设置,不可更改</small>
        </div>
        <div class="form-group">
            <label for="courierPsw">密码</label>
            <input type="password" class="form-control col-lg-6 col-md-4" id="courierPsw" name="courierPsw" aria-describedby="courierPswHelp">
            <small id="courierPswHelp" class="form-text text-muted">密码用于登录</small>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input"  id="remember"  checked="checked" name="autoLogin"/>
            <label class="form-check-label" for="remember">记住密码</label>
        </div>
        <a  href="javascript:void(0)"  id="submitLogin" class="btn btn-dark" title="登 &nbsp; &nbsp; 录"/>登 &nbsp; &nbsp; 录</a>
        <a  href="courierRegister.jsp"   class="btn btn-dark" title="登 &nbsp; &nbsp; 录"/>立 即 注 册</a>
    </form>
</div>

<%--1--%>


</body>
<script type="text/javascript">
    $(function(){

        //加载则判断本地缓存中是否有账号密码
        var storage=window.localStorage;
        if(storage.length>0){
            //存在则复选框选中，默认填充第一个账号
            $("#remember").prop("checked",true);
            var key=storage.key(0);
            $("#courierName").val(key);//账号
            $("#courierPsw").val(localStorage.getItem(key));//密码
        }else{
            //不存在则复选框不选中
            $("#remember").prop("checked",false);
        }

        /*用户名改变时从localStorage中得到密码*/
        $(document).on("blur","#courierName",function(){
            var loginUname = $(this).val();
            var loginPwd = localStorage.getItem(loginUname);

            if(loginPwd != null){
                //密码框赋值
                $("#courierPsw").val(loginPwd);
                $("#remember").prop("checked",true);
            }else{
                //localStorage中不存在则空串
                $("#courierPsw").val("");
                $("#remember").prop("checked",false);
            }
        });

        // 点击登录按钮
        $("#submitLogin").click(function () {

            // 使用表单序列化,传递表单中的组件内容用户名,密码
            var formdata = $("#loginForm").serialize();

            // 获取复选框状态
            var checkbox =  $("#remember").prop("checked");
            // 获取用户名
            var courierName = $("#courierName").val();
            // 获取密码
            var courierPwd = $("#courierPsw").val();

            // 表单提交
            $.ajax({
                async:true,
                type:"post",
                url:"${pageContext.request.contextPath}/courierLoginController/login",
                data:formdata,
                dataType:"json",
                success:function (result) {
                    if(result == true){ // 登录成功
                        // 判断是否有记住密码
                        if(checkbox){
                            // 1.将用户信息存储在本地缓存中localStorage
                            window.localStorage.setItem(courierName,courierPwd);
                        }else{
                            // 1.将用户信息从本地缓存中localStorage清除
                            window.localStorage.removeItem(courierName);
                        }
                        // 2.页面跳转到首页
                        location.href = "courierDeliveryView.jsp";
                    }else if ((result == false)) { // 登录失败
                        // 提示
                        alert("用户名或密码错误!");
                        // 清空输入的密码
                        $("#courierPsw").val("");
                    }
                },
                error:function () {
                    alert("异步请求失败!");
                }
            });
        });

    })
</script>
</html>